<template>
  <view class="address">
    <view v-if="addressList.length === 0" class="address--backGround">
      <m-icon name="icondizhi" class="icon" size="300rpx"></m-icon>
      <view>暂时没有地址</view>
    </view>
    <u-radio-group v-model="chooseAddressName">
    <view class="address--info">
      <view v-for="(item, index) in addressList" :key="index" class="address--info__item">
        <view class="location" @click="chooseBack" :data-item="item">
          <view class="location--user">
            <text class="location--user__userName">{{item.userName}}</text>
            <text class="location--user__phone">{{item.phone}}</text>
          </view>
          <view class="location--info">
            <text class="location--info__default" v-if="item.isDefault === 1">默认</text>
            <text class="location--info__province location--info__text">{{item.province}}</text>
            <text class="location--info__city location--info__text">{{item.city}}</text>
            <text class="location--info__county location--info__text">{{item.county}}</text>
            <text class="location--info__detailInfo location--info__text">{{item.detailInfo}}</text>
          </view>
        </view>
        <view class="address--item__edit">
          <u-radio  shape="circle" activeColor="black" @change="onCheckBoxChange(index)" :key="index" :name="item.id" label="设为默认">
            <text>设为默认</text>
          </u-radio>
          <view class="item__edit">
            <view class="edit--item edit" @click="handleItemClick" :data-address="item">
              <m-icon name="iconbianji icon" class="icon"></m-icon>
              <text>编辑</text>
            </view>
            <view class="edit--item delete" @click="deleteAddress" :data-id="item.id">
              <m-icon name="icondelete" class="icon"></m-icon>
              <text>删除</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    </u-radio-group>
    <view class="address--buttons">
      <view class="button--item warn" v-if="authLocationStatus === '首次授权' || authLocationStatus === '已授权'"
        @click="addManualLocation">
        <m-icon name="icongouwuche-jia" class="icon"></m-icon>
        <span>手动添加</span>
      </view>
      <!-- <block>
        <view class="button--item warn" v-if="authLocationStatus === '首次授权' || authLocationStatus === '已授权'"
          @click="addManualLocation">
          <m-icon name="icongouwuche-jia" class="icon"></m-icon>
          <span>手动添加</span>
        </view>
        <button class="button--item warn" v-else open-type="openSetting" @opensetting="addManualOpenLocation">
          <m-icon name="icongouwuche-jia" class="icon"></m-icon>
          <span>手动添加</span>
        </button>
        <button class="button--item primary" v-if="authAddressStatus === '首次授权' || authAddressStatus === '已授权'"
          @click="addWxLocation">
          <m-icon name="icongouwuche-jia" class="icon"></m-icon>
          <span>微信添加</span>
        </button>
        <button class="button--item primary" v-else open-type="openSetting" @opensetting="addWxOpenLocation">
          <m-icon name="icongouwuche-jia" class="icon"></m-icon>
          <span>微信添加</span>
        </button>
      </block> -->
    </view>
  </view>
</template>
<script lang='ts'>
  import {
    Component,
    Vue
  } from 'vue-property-decorator'
  import {
    getAddressList,
    addAddress,
    getArea,
    deleteAddress,
    updateAddress,
    getLatAndLon,
    analysisLatAndLon,
  } from "@/api/modules/address";
  import {
    AddressForm
  } from "../addAddress/addAddress.vue"
  import mIcon from "@/components/m-icon/m-icon.vue"
  @Component({
    components: {
      mIcon,
    }
  })
  export default class Address extends Vue {
    // 地址列表
    addressList: Array < any >= []
    addressForm: AddressForm = {
      id: 0,
      city: "",
      county: "",
      detailInfo: "",
      location: "",
      phone: "",
      province: "",
      userName: "",
      defaultStatus: "",
      postCode: "",
    }
    areaList: any = {
      province_list: {},
      city_list: {},
      county_list: {},
    }
    authAddressStatus: string = "首次授权"
    defaultArea: string = ""
    authLocationStatus: string = "首次授权"
    redirect: string = ""
    chooseAddressName=0
    async onLoad({
      redirect
    }) {
      this.redirect = redirect
      this.getDataList();
      /** 初始化地址选择器数据（初始化省） */
      const area = await getArea({
        id: "",
        type: 1
      });
      const province_list = {}
      area.forEach(element => {
        province_list[element.value] = element.label;
      });
      this.areaList.province_list = province_list
      // this.getPermission();
    }
    onShow() {
      this.getDataList();
    }
    /**
     * 选择地址后返回
     */
    chooseBack(e) {
      const addressOption = e.currentTarget.dataset.item;
      if (this.redirect) {
        const pages = getCurrentPages(); // eslint-disable-line
        const prevPage = pages[pages.length - 2] as any;
        // 将要传递的参数在这里直接setData。上个页面就会执行这里的操作。
        prevPage.$vm.address = addressOption,
          uni.navigateBack({
            delta: 1,
          });
      }
    }
    /** 获取地址列表 */
    async getDataList() {
      const addressList = await getAddressList({
        type: 1
      });
      this.chooseAddressName=addressList.map(item=>{
        return item.isDefault && item.id
      }).filter(Boolean)[0]
      this.addressList = addressList
    }

    formatPhone(phone) {
      return phone.substr(0, 3) + "****" + phone.substr(7);
    }
    async onCheckBoxChange(e) {
      const address = this.addressList[e]
      const addressForm = this.addressForm;
      const addressForEachList = this.addressList
      addressForm.id = address.id;
      addressForm.defaultStatus = 1;
      addressForm.phone = address.phone;
      addressForm.location = address.location;
      addressForm.city = address.city;
      addressForm.county = address.county;
      addressForm.detailInfo = address.detailInfo;
      addressForm.userName = address.userName;
      addressForm.province = address.province;
      addressForm.postCode = address.postCode;
      addressForEachList.forEach(item => {
        if (item.id === addressForm.id) {
          item.defaultStatus = 1;
        }
      });
      this.addressForm = addressForm
      this.addressList = addressForEachList
      this.addOrUpdateAddress("直接修改");
    }
    /** 手动添加(首次授权/已授权) */
    async addManualLocation() {
      uni.navigateTo({
        url: "/subcontract/pages/addAddress/addAddress?addressForm="
      });
    }
    /** 根据经纬度设置省市区 */
    async setAddressByLatAndLon(site) {
      const latAndLon = await analysisLatAndLon({
        site
      });
      /** 省市区赋值 */
      this.addressForm.province = latAndLon.province.label
      this.addressForm.city = latAndLon.city ? latAndLon.city.label : ""
      this.addressForm.county = latAndLon.district ?
        latAndLon.district.label :
        "";
      this.addressForm.postCode = latAndLon.adcode ? latAndLon.adcode : ""
    }
    /** 微信添加 */
    // async addWxLocation() {
    //   const locationEnabled = this.verifyLocationEnabled();
    //   if (!locationEnabled) {
    //     return;
    //   }
    //   if (this.authAddressStatus === "首次授权") {
    //     uni.chooseAddress({
    //       success: res => {
    //         this.addressForm.id = 0
    //         this.addressForm.phone = res.telNumber
    //         this.addressForm.city = res.cityName
    //         this.addressForm.county = res.countyName
    //         this.addressForm.detailInfo = res.detailInfo
    //         this.addressForm.userName = res.userName
    //         this.addressForm.province = res.provinceName
    //         this.authAddressStatus = "已授权"
    //         this.addOrUpdateAddress();
    //       },
    //       fail: () => {
    //         this.authAddressStatus = "未授权"
    //       },
    //     });
    //   }
    //   if (this.authAddressStatus === "已授权") {
    //     uni.chooseAddress({
    //       success: res => {
    //         this.addressForm.id = 0
    //         this.addressForm.phone = res.telNumber
    //         this.addressForm.city = res.cityName
    //         this.addressForm.county = res.countyName
    //         this.addressForm.detailInfo = res.detailInfo
    //         this.addressForm.userName = res.userName
    //         this.addressForm.province = res.provinceName
    //         this.addOrUpdateAddress();
    //       }
    //     });
    //   }
    // }

    // async addWxOpenLocation() {
    //   const locationEnabled = this.verifyLocationEnabled();
    //   if (!locationEnabled) {
    //     return;
    //   }
    //   this.authAddressStatus = "已授权"
    //   uni.chooseAddress({
    //     success: res => {
    //       this.addressForm.id = 0
    //       this.addressForm.phone = res.telNumber
    //       this.addressForm.city = res.cityName
    //       this.addressForm.county = res.countyName
    //       this.addressForm.detailInfo = res.detailInfo
    //       this.addressForm.userName = res.userName
    //       this.addressForm.province = res.provinceName
    //       this.addOrUpdateAddress();
    //     },
    //     fail: () => {
    //       this.authAddressStatus = "未授权"
    //     },
    //   });
    // }
    async addOrUpdateAddress(type ? ) {
      if (!this.addressForm.userName) {
        uni.showToast({
          title: "请输入收货人姓名",
          icon: "none"
        })
        return;
      }
      if (
        !(
          this.addressForm.phone && this.$global.isPhone(this.addressForm.phone)
        )
      ) {
        uni.showToast({
          title: "手机号不正确",
          icon: "none"
        })
        return;
      }
      if (
        !(
          this.addressForm.province &&
          this.addressForm.city &&
          this.addressForm.county
        )
      ) {
        uni.showToast({
          title: "存在空的地址信息",
          icon: "none"
        })
        return;
      }
      if (this.addressForm.id !== 0) {
        // 如果不修改直接保存，后端会报重复错误，不进行处理，认为修改成功
        try {
          /* 更新地址 */
          if (type !== "直接修改") {
            await this.getLatAndLonByAddress();
          }
          await updateAddress(JSON.stringify(this.addressForm));
          uni.showToast({
            title: "操作成功",
            icon: "none"
          })
          this.getDataList();
        } catch (err) {
            uni.showToast({
              title: err,
              icon: "none"
            })
          // 后端会做重复判断
          // if (err === "请勿添加相同地址") {
          //   uni.showToast({
          //     title: "修改地址成功",
          //     icon: "none"
          //   })
          // } else {
          //   uni.showToast({
          //     title: err,
          //     icon: "none"
          //   })
          // }
        }
      } else {
        try {
          await this.getLatAndLonByAddress();
          await addAddress(JSON.stringify(this.addressForm));
          uni.showToast({
            title: "添加地址成功",
            icon: "none"
          })
          this.getDataList();
        } catch (err) {
          uni.showToast({
            title: err,
            icon: "none"
          })
        }
      }
    }
    /* 根据地址信息获取经纬度 */
    async getLatAndLonByAddress() {
      const {
        province,
        city,
        county,
        detailInfo
      } = this.addressForm;
      const site = province + city + county + detailInfo;
      const latAndLon = await getLatAndLon({
        site
      });
      this.addressForm.location = latAndLon.location
      this.addressForm.postCode = latAndLon.andlongitudeVo.adcode
    }
    // 删除地址
    deleteAddress(e) {
      this.$Popup.modal({
        title:'提示',
        content:"确定删除该地址"
      }).then(async () => {
        await deleteAddress(e.currentTarget.dataset.id);
        this.$Popup.toast("删除成功")
        this.getDataList();
      }).catch(() => {
        this.getDataList();
      })
    }

    // async getPermission() {
    //   let that = this
    //   // 确认授权
    //   uni.getSetting({
    //     success(res) {
    //       const authSetting = res.authSetting
    //       if (authSetting["scope.userLocation"] === undefined) {
    //         that.authLocationStatus = "首次授权"
    //       } else if (authSetting["scope.userLocation"]) {
    //         that.authLocationStatus = "已授权"
    //       } else {
    //         that.authLocationStatus = "未授权"
    //       }
    //       if (authSetting["scope.address"] === undefined) {
    //         that.authAddressStatus = "首次授权"
    //       } else if (authSetting["scope.address"]) {
    //         that.authAddressStatus = "已授权"
    //       } else {
    //         that.authAddressStatus = "未授权"
    //       }
    //     }
    //   });
    // }

    handleItemClick(e) {
      const address = e.currentTarget.dataset.address;
      this.addressForm.id = address.id
      this.addressForm.defaultStatus = address.isDefault
      this.addressForm.phone = address.phone
      this.addressForm.city = address.city
      this.addressForm.county = address.county
      this.addressForm.detailInfo = address.detailInfo
      this.addressForm.userName = address.userName
      this.addressForm.province = address.province
      this.addressForm.postCode = address.postCode
      uni.navigateTo({
        url: "/subcontract/pages/addAddress/addAddress?addressForm=" +
          JSON.stringify(this.addressForm),
      });
    }
  }
</script>
<style lang="scss" scoped>
  @import "@/assets/styles/_var.scss";

  page {
    height: 100%;
  }

  .address {
    @mixin b-padding {
      padding: 40rpx;
    }

    background: #f5f5f5;
    min-height: 100%;

    .address--backGround {
      position: absolute;
      width: 100%;
      height: 100%;
      @include flex;
      flex-direction: column;
      color: #cacaca;
    }
    .address--info {
      width: 750rpx;
      color: #5c5c5c;
      overflow: scroll;
      height: 100%;
      margin-bottom: 123rpx;

      .address--info__item {
        margin: 0 20rpx 20rpx 20rpx;
        background-color: #fff;
        font-size: 28rpx;

        &:first-child {
          margin-top: 20rpx;
        }

        .address--item__edit {
          @include flex(space-between, center);
          background-color: #fff;
          padding: 0rpx 20rpx 20rpx 20rpx;

          .icon,
          .edit {
            padding-right: 12rpx;
          }

          .edit--item {
            @include flex()
          }

          .item__edit {
            @include flex(space-between, center);
          }
        }
      }
    }

    .address--buttons {
      @include flex;
      position: fixed;
      bottom: 0;
      width: 100%;
      padding: 30rpx 0rpx;
      background: #fff;

      .button--item {
        @include flex;
        width: 320rpx;
        height: 64rpx;
        border-radius: 32rpx;
        text-align: center;

        span {
          padding-left: 10rpx;
        }

        &.warn {
          background: #e64340;
          color: #fff;
        }

        &.primary {
          background: #1aad19;
          margin-left: 20rpx;
          color: #fff;
        }
      }
    }

    .location {
      color: #333;
      padding: 20rpx;

      .location--user {
        @include flex(space-between, center);
        padding: 15rpx 0rpx;
        font-size: 32rpx;
      }

      .location--info {
        font-size: 24rpx;
        padding: 20rpx 0rpx;
        border-bottom: 1rpx solid #f8f5f9;

        .location--info__default {
          box-sizing: border-box;
          font-size: 22rpx;
          padding: 1rpx 10rpx;
          color: #fff;
          font-weight: 300;
          background-color: red;
          border-radius: 20rpx;
        }

        .location--info__text {
          padding: 0 5rpx;
          color: #909399;
        }
      }
    }
  }
</style>